<template lang="html">
  <el-drawer v-model="drawer" :title="drawerTitle" size="45%" :append-to-body="true">
    <div class="content-container opLog-container">
      <!--表格-->
      <div class="table content-condition">
        <common-table :isShowLoading="tableData.poolIsShowLoading" :tableId="tableData.tableId"
          :columns="tableData.columns" emptyText="没有找到数据" :data="tableData.datas" :tableType="tableData.tableType"
          :pager="tableData.pager" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
          @handleSelectionChange="handleSelectionChange" @handleExpandChange="handleExpandChange" :rowkey="'id'"
          :expandRowKeys="tableData.expandRowKeys" ref="table">
          <template #operationLogSlot="slotData">
            <div class="operation-log-content">
              {{ (slotData.scope.row.operationLog || '').replaceAll('\r\n', '\n') }}
            </div>
          </template>
        </common-table>
      </div>
    </div>
  </el-drawer>
</template>
<script setup lang="js">
import { ref, defineExpose } from 'vue';
import _ from 'lodash';
import { getOpLogPageList } from '@/api/common';

const initSearchData = () => {
  return {
    sourceId: '',
    pageIndex: 0,
    pageSize: 10,
  };
};

const drawer = ref(false);
const drawerTitle = ref("");
const searchData = ref(initSearchData());

const tableData = ref({
  tableId: 'opLogTable',
  tableType: ["table"], //table-表格 dualCard-双卡片 其它-单卡片
  columns: [
    {
      slotName: "operationLogSlot",
      label: "操作内容",
      width: "60",
      align: "left",
      sortable: false,
      show: true,
    },
    {
      prop: "createUserName",
      label: "操作人",
      width: "15",
      align: "left",
      sortable: false,
      show: true
    },
    {
      prop: "createDateTime",
      label: "操作时间",
      width: "30",
      align: "left",
      sortable: false,
      show: true
    },
  ],
  datas: [],
  pager: {
    //分页栏信息
    pageNo: 1, //第几页
    limit: 10, //每页记录数
    sizes: [10, 20, 50],
    total: 0, //总记录数
    isShow: true //是否显示
  },
  expandRowKeys: [],
  selectedRows: [],
  poolIsShowLoading: false,
});

// Methods
/**  * 搜索  */
function searchFun() {
  // 这里可以添加搜索逻辑
  console.log('搜索条件:', searchData.value);
  tableData.value.poolIsShowLoading = true;
  getDataFun();
}

/**  * 获取数据  */
const getDataFun = _.debounce(() => {
  let params = Object.assign({}, searchData.value);
  getOpLogPageList(params).then((res) => {
    tableData.value.datas = res.data.data;
    tableData.value.pager = {
      total: res.data.records,
      limit: res.data.pageSize,
      pageNo: res.data.pageIndex + 1
    };
  }).finally(() => {
    tableData.value.poolIsShowLoading = false;
  });
}, 300);

/**  * 改变页码  * @param pageNo 当前页码  */
function handleCurrentChange(pageNo) {
  searchData.value.pageIndex = pageNo;
  searchFun();
}

/**  * 改变每页记录数  * @param pageSize 每页记录数  */
function handleSizeChange(pageSize) {
  searchData.value.pageSize = pageSize;
  searchFun();
}

/**  * 处理选中行变化  * @param selection 选中行数据  */
function handleSelectionChange(selection) {
  tableData.value.selectedRows = selection;
}

/**  * 打开抽屉  * @param sourceId 源编号  */
function open({ sourceId, title }) {
  drawer.value = true;
  drawerTitle.value = title || "操作日志";
  searchData.value.sourceId = sourceId;
  searchFun();
}

defineExpose({
  openDrawer: open,
});

</script>
<style lang="less">
.opLog-container {
  .tableBox {
    padding: 0px !important;
  }

  .table {
    .operation-log-content {
      /* 保持换行 */
      white-space: pre-wrap;
      word-break: break-all;
    }
  }
}
</style>
